<template>
	<view class="p-10">
		<u-collapse :value="showMoreKeys">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">巡检任务清单</text></view>
				</template>
				<up-list height="200">
					<up-list-item v-for="(item, index) in tableData" :key="index">
						<up-cell :title="item.inspectionName">
							<template #label>
								<view class="f-s-10" style="color:#909399">
									<text class="m-r-10">{{item.planStartTime}}</text>
									<text style="color: blueviolet">{{item.inspectionUserName}}</text>
								</view>
							</template>
							<template #value>
								<up-tag :text="item.executeStateName" shape="circle" plain size="mini"
									:type="item.executeStateName === '已实施' ? 'success' : 'info'" />
							</template>
						</up-cell>
					</up-list-item>
				</up-list>
			</u-collapse-item>

			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">巡检设备清单</text></view>
				</template>
				<up-list height="200">
					<up-list-item v-for="(item, index) in tableData2" :key="index">
						<up-cell :title="item.设备名称">
							<template #label>
								<view class="f-s-10" style="color:#909399">
									<text class="m-r-10">{{item.开始时间}}</text>
									<text style="color: blueviolet">{{item.巡检人}}</text>
								</view>
							</template>
							<template #value>
								<up-tag :text="item.使用状态" shape="circle" plain size="mini"
									:type="item.使用状态 === '在用' ? 'success' : 'info'" />
							</template>
						</up-cell>
					</up-list-item>
				</up-list>
			</u-collapse-item>

			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">巡检人员列表</text></view>
				</template>
				<up-list height="200">
					<view v-for="(item,i) in list3" :key="i" :class="{'m-t-10': i > 0}"
						class="flex s-center m-between p-10 b-r-10"
						style="background-color: #F5F7FE;border: 1px solid #DCE3E8;">
						<view style="background-color: #0D79BE;" class="b-r-10 p-t-5 p-x-5">
							<image :src="getImgUrl(`tx.png`)" mode="widthFix" style="width: 100rpx" class="block">
							</image>
						</view>
						<view class="f1 w0 m-l-10">
							<view class="m-b-10">
								<text style="color:#0052D9" class="f-s-20 fw">{{item.名称}}</text>
							</view>
							<view>
								<text style="color: #555D6F" class="m-r-10 textmp-1">{{item.单位}}</text>
							</view>
						</view>
						<image :src="getImgUrl(`phone.png`)" mode="widthFix" style="width: 80rpx" @click="item.联系方式" />
					</view>
				</up-list>
			</u-collapse-item>

			<!-- <u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">资源储量变化趋势</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">资源储量分类统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item> -->
		</u-collapse>
	</view>
</template>

<script setup>
	import {
		getApiFabric,
	} from "@/api/customApi";

	const collapse = ref(null),
		showMoreKeys = [1, 2, 3];

	/*********************************************巡检任务清单**********************************/
	const tableData = ref([]);

	function fn1() {
		getApiFabric({
			apiCode: "662b1376-c005-4b9f-b33f-9786dc481360",
			pageIndex: 1,
			pageSize: 15,
			params: [{
				code: "pageIndex",
				value: 1
			}, {
				code: "pageSize",
				value: 15
			}, {
				code: "total",
				value: true
			}],
			propertyMapping: {
				inspectionName: "inspectionName",
				inspectionUserName: "inspectionUserName",
				planStartTime: "planStartTime",
				executeStateName: "executeStateName"
			},
			total: true
		}).then(res => {
			tableData.value = res.data;
		})
	}

	/*********************************************巡检设备清单**********************************/
	const tableData2 = ref([]);

	function fn2() {
		getApiFabric({
			apiCode: "f23f65a6-a431-45c5-98c4-1fa075d7c1b2",
			pageIndex: 1,
			pageSize: 15,
			params: [{
				code: "pageIndex",
				value: 1
			}, {
				code: "pageSize",
				value: 15
			}, {
				code: "total",
				value: true
			}],
			propertyMapping: {
				设备名称: "equName",
				设备类别: "equSortName",
				巡检人: "inspectionUserName",
				开始时间: "planStartTime",
				使用状态: "equState"
			},
			total: true
		}).then(res => {
			tableData2.value = res.data;
		})
	}


	/*********************************************巡检人员列表**********************************/
	const list3 = ref([]);

	function fn3() {
		getApiFabric({
			apiCode: "7d41a4cd-8f47-4666-bd54-3b5213440ef5",
			pageIndex: 1,
			pageSize: 15,
			params: [{
				code: "pageIndex",
				value: 1
			}, {
				code: "pageSize",
				value: 15
			}, {
				code: "total",
				value: true
			}],
			propertyMapping: {
				名称: "inspectionUserName",
				单位: "inspectionDeptName",
				联系方式: "phone"
			},
			total: true
		}).then(res => {
			list3.value = res.data;
		})
	}

	/*********************************************生产计划**********************************/
	const opts = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [0, 10, 10, 0],
			legend: {
				position: "top",
				fontSize: 12,
			},
			xAxis: {
				disableGrid: true,
				calibration: true,
			},
			yAxis: {
				showTitle: true,
				gridType: "dash",
				data: [{
					min: 0,
					title: "万吨",
					titleOffsetY: -10,
				}],
			},
			extra: {
				line: {
					type: "straight",
					width: 2,
					activeType: "hollow",
				},
			},
		},
		chartData = ref({});

	function fn8() {
		getByApiCode({
			apiCode: "ZYCLBHQS",
			propertyMapping: {
				name: "name",
				year: "year",
				val: "val"
			},
		}).then((res) => {
			const categories = [];
			const groups = res.data.reduce((groups, person) => {
				const key = person.name;
				if (!groups[key]) groups[key] = [];
				groups[key].push(person.val);
				if (!categories.includes(person.year)) categories.push(person.year)
				return groups;
			}, {});
			const series = [];
			for (let [name, data] of Object.entries(groups)) {
				series.push({
					name,
					data
				})
			}
			chartData.value.categories = categories;
			chartData.value.series = series;
		})
	}

	/*********************************************资源储量分类统计**********************************/
	const opts2 = {
			padding: [0, 0, 0, 0],
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true,
				fontSize: 10,
			},
			yAxis: {
				showTitle: true,
				gridType: "dash",
				data: [{
					min: 0,
					title: "万吨",
					titleOffsetY: -10,
				}],
			},
			extra: {
				column: {
					type: "group",
					width: 20,
					linearType: "custom",
					seriesGap: 5,
					linearOpacity: 0.5,
					barBorderCircle: true,
					customColor: [
						"#1890FF",
						"#EB88E2"
					]
				}
			},
		},
		chartData2 = ref({
			categories: [],
			series: [{
				name: "",
				data: [],
			}],
		});

	function fn9() {
		getByApiCode({
			apiCode: "ZYCLFLTJ",
			propertyMapping: {
				name: "name",
				val: "val"
			}
		}).then((res) => {
			const categories = [],
				data = [];
			res.data.forEach((item) => {
				categories.push(item.name)
				data.push(item.val)
			})
			chartData2.value.categories = categories;
			chartData2.value.series[0].data = data;
		})
	}

	function getServerData(refresh) {
		Promise.all([fn1(), fn2(), fn3()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>